<template>
  <el-config-provider namespace="flow-designer" :z-index="20000">
    <div class="my-nav-content flow-designer-nav-content">
      <section class="dingflow-design" ref="dingflowDesignRef">
        <div class="zoom" v-if="showZoomBtns">
          <div class="zoom-out" @click="zoomOut" title="缩小"></div>
          <span>{{ nowVal }}%</span>
          <div class="zoom-in" @click="zoomIn" title="放大"></div>
          <!--刷新图标代码-->
          <div class="zoom-reset" @click="zoomReset" title="还原缩放比例">&#10227</div>
        </div>
        <div class="box-scale" ref="boxScaleRef">
          <nodeWrap v-model:nodeConfig="nodeConfig" :flow-permission="store.permissionList"/>
          <div class="end-node">
            <div class="end-node-circle">流程结束</div>
          </div>
        </div>
      </section>
    </div>
    <approver-drawer   :process-data="processData"></approver-drawer>
    <condition-drawer  :process-data="processData"></condition-drawer>
    <copyer-drawer  :process-data="processData"></copyer-drawer>
  </el-config-provider>

</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import {FormatDisplayUtils} from "../utils/formatdisplay_data.js";
import nodeWrap from "./nodeWrap.vue"
import {resetImage, wheelZoomFunc, zoomInit} from "../utils/zoom.js";
import {useStore} from "../stores/index.js";
import {nodeTypeList} from "@/utils/const.js";
import {FormatUtils} from "@/utils/formatcommit_data.js";
import approverDrawer from "@/components/drawer/approverDrawer.vue";
import conditionDrawer from "@/components/drawer/conditionDrawer.vue";
// import PromoterDrawer from "./drawer/promoterDrawer.vue";
import CopyerDrawer from "./drawer/copyerDrawer.vue";


let directorMaxLevel = ref(3);
let props = defineProps({
  processData: {
    type: Object,
    default: () => null,
  },
  showZoomBtns: {
    type: Boolean,
    default: true,
  },
  tagList: {
    type: Array,
    default: () => ([]),
  },
  userList: {
    type: Array,
    default: () => ([]),
  },
  flowPermission:{
    type: Array,
    default: () => ([]),
  }
});
let nowVal = ref(100);
const store = useStore();
let {setFlowId, setIsTried,setTag,setUser,setFlowPermi} = store
// let data = FormatDisplayUtils.getToTree(props.processData);
let nodeConfig = ref({});
watch(()=>props.processData, (val) => {
  console.log('数据发生变化了')
  let d = FormatDisplayUtils.getToTree(val);
  nodeConfig.value = d.nodeConfig
},{
  immediate:true
})

watch(() => props.tagList, (val) => {
  console.log('tagList发生变化',val)
  setTag(val)
}, {
  immediate: true
})
watch(() => props.userList, (val) => {
  console.log('userList发生变化',val)
  setUser(val)
}, {
  immediate: true
})
watch(() => props.flowPermission, (val) => {
  console.log('flowPermission发生变化',val)
  setFlowPermi(val)
}, {
  immediate: true
})
const dingflowDesignRef = ref(null);
const boxScaleRef = ref(null);
let tipList = ref([]);
let tipVisible = ref(false);


onMounted(async () => {
  zoomInit(dingflowDesignRef, boxScaleRef, (val) => {
    nowVal.value = val
  })
});
const zoomIn = () => {
  wheelZoomFunc({scaleFactor: parseInt(nowVal.value) / 100 + 0.1, isExternalCall: true})

}
const zoomOut = () => {
  wheelZoomFunc({scaleFactor: parseInt(nowVal.value) / 100 - 0.1, isExternalCall: true})

}

const zoomReset = () => {
  resetImage()
}
/**
 * 判断流程中是否有审批节点
 * @param treeNode
 */
const preTreeIsApproveNode = (treeNode) => {
  if (!treeNode) return false;
  if (treeNode.nodeType === 2) {
    return true;
  } else {
    return preTreeIsApproveNode(treeNode.childNode);
  }
}
/** 节点验证 */
const validateErr = ({childNode}) => {
  if (childNode) {
    let {nodeType, error, nodeName, conditionExpressionList} = childNode;
    if (nodeType === 1) {
      validateErr(childNode);
    } else if (nodeType === 4) {
      validateErr(childNode);
      for (let i = 0; i < conditionExpressionList.length; i++) {
        if (conditionExpressionList[i].error) {
          tipList.value.push({name: conditionExpressionList[i].nodeName, nodeType: "条件"});
        }
        validateErr(conditionExpressionList[i]);
      }
    } else if (nodeType === 3) {
      validateErr(childNode);
    } else if (nodeType === 2 || nodeType === 6) {
      if (error) {
        tipList.value.push({
          name: nodeName,
          nodeType: nodeTypeList[nodeType],
        });
      }
      validateErr(childNode);
    }
  } else {
    childNode = null;
  }
};


const getJson = () => {
  setIsTried(true);
  let isApproveNode = preTreeIsApproveNode(nodeConfig.value);
  if (!nodeConfig.value || !nodeConfig.value.childNode || !isApproveNode) {
    return [["请至少设置一个审批节点"],null];
  }
  tipList.value = [];
  validateErr(nodeConfig.value);
  if (tipList.value.length !== 0) {
    tipVisible.value = true;
    return [tipList.value,null];
  }
  let submitData = JSON.parse(JSON.stringify(nodeConfig.value));
  return [[],submitData];
};

// 给父级页面提供得获取本页数据得方法
const getData = () => {
  let [err,resData] = getJson();
  if (!resData) {
    return [err,null];
  }else {
    console.log(resData)
    const nodes = FormatUtils.formatSettings(resData);
    console.log(nodes)
    return [[],nodes]
  }
};
defineExpose({
  getData
})
</script>
<style  lang="scss">
.flow-designer-nav-content {


  *,
  :after,
  :before {
    box-sizing: border-box
  }
  .dingflow-design {
    width: 100%;
    background-color: #f5f5f7;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }

  .dingflow-design .box-scale {
    transform: scale(1);
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 54.5px 0;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-width: min-content;
    background-color: #f5f5f7;
    /*transform-origin: 50% 0px 0px;*/
  }

  .dingflow-design .node-wrap {
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    padding: 0 50px;
    position: relative
  }

  .dingflow-design .branch-wrap,
  .dingflow-design .node-wrap {
    display: inline-flex;
    width: 100%
  }

  .dingflow-design .branch-box-wrap {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 270px;
    width: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0
  }

  .dingflow-design .branch-box {
    display: flex;
    overflow: visible;
    min-height: 180px;
    height: auto;
    border-bottom: 2px solid #ccc;
    border-top: 2px solid #ccc;
    position: relative;
    margin-top: 15px
  }

  .dingflow-design .branch-box .col-box {
    background: #f5f5f7
  }

  .dingflow-design .branch-box .col-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    margin: auto;
    width: 2px;
    height: 100%;
    background-color: #cacaca
  }

  .dingflow-design .add-branch {
    border: none;
    outline: none;
    user-select: none;
    justify-content: center;
    font-size: 12px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    color: #3296fa;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center center;
    cursor: pointer;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1)
  }

  .dingflow-design .add-branch:hover {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1)
  }

  .dingflow-design .add-branch:active {
    transform: translateX(-50%);
    box-shadow: none
  }

  .dingflow-design .col-box {
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    position: relative
  }

  .dingflow-design .condition-node {
    min-height: 220px
  }

  .dingflow-design .condition-node,
  .dingflow-design .condition-node-box {
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 1
  }

  .dingflow-design .condition-node-box {
    padding-top: 30px;
    padding-right: 50px;
    padding-left: 50px;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    flex-grow: 1;
    position: relative
  }

  .dingflow-design .condition-node-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 2px;
    height: 100%;
    background-color: #cacaca
  }

  .dingflow-design .auto-judge {
    position: relative;
    width: 220px;
    min-height: 72px;
    background: #fff;
    border-radius: 4px;
    padding: 14px 19px;
    cursor: pointer
  }

  .dingflow-design .auto-judge:after {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all .1s cubic-bezier(.645, .045, .355, 1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
  }

  .dingflow-design .auto-judge.active:after,
  .dingflow-design .auto-judge:active:after,
  .dingflow-design .auto-judge:hover:after {
    border: 1px solid #3296fa;
    box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3)
  }

  .dingflow-design .auto-judge.active .close,
  .dingflow-design .auto-judge:active .close,
  .dingflow-design .auto-judge:hover .close {
    display: block
  }

  .dingflow-design .auto-judge.error:after {
    border: 1px solid #f25643;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
  }

  .dingflow-design .auto-judge .title-wrapper {
    position: relative;
    font-size: 12px;
    color: #15bc83;
    text-align: left;
    line-height: 16px
  }

  .dingflow-design .auto-judge .title-wrapper .editable-title {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .dingflow-design .auto-judge .title-wrapper .priority-title {
    display: inline-block;
    float: right;
    margin-right: 10px;
    color: rgba(25, 31, 37, .56)
  }

  .dingflow-design .auto-judge .placeholder {
    color: #bfbfbf
  }

  .dingflow-design .auto-judge .close {
    display: none;
    position: absolute;
    right: -10px;
    top: -10px;
    width: 20px;
    height: 20px;
    font-size: 14px;
    color: rgba(0, 0, 0, .25);
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    z-index: 2
  }

  .dingflow-design .auto-judge .content {
    font-size: 14px;
    color: #191f25;
    text-align: left;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 16px;
  }

  .dingflow-design .auto-judge .sort-left,
  .dingflow-design .auto-judge .sort-right {
    position: absolute;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 1
  }

  .dingflow-design .auto-judge .sort-left {
    left: 0;
    border-right: 1px solid #f6f6f6
  }

  .dingflow-design .auto-judge .sort-right {
    right: 0;
    border-left: 1px solid #f6f6f6
  }

  .dingflow-design .auto-judge:hover .sort-left,
  .dingflow-design .auto-judge:hover .sort-right {
    display: flex;
    align-items: center
  }

  .dingflow-design .auto-judge .sort-left:hover,
  .dingflow-design .auto-judge .sort-right:hover {
    background: #efefef
  }

  .dingflow-design .end-node {
    border-radius: 50%;
    font-size: 14px;
    color: rgba(25, 31, 37, .4);
    text-align: left
  }
  .dingflow-design .end-node .end-node-circle:before{
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    border-style: solid;
    border-width: 8px 6px 4px;
    border-color: #cacaca transparent transparent;
    background: #f5f5f7
  }
  .dingflow-design .end-node .end-node-circle {
    width: 147px;
    height: 40px;
    margin: auto;
    line-height: 40px;
    background: white;
    text-align: center;
    border-radius: 4px;
    position: relative;
    color: #000;
    font-size: 12px;
  }

  .dingflow-design .end-node .end-node-text {
    margin-top: 5px;
    text-align: center
  }


  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;




  .zoom {
    display: flex;
    position: fixed;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 40px;
    /*width: 125px;*/
    right: 40px;
    margin-top: 30px;
    z-index: 10
  }

  .zoom .zoom-in,
  .zoom .zoom-out {
    width: 30px;
    height: 30px;
    background: #fff;
    color: #c1c1cd;
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat
  }

  .zoom .zoom-out {
    background-image: url(~@/assets/images/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png)
  }

  .zoom .zoom-out.disabled {
    opacity: .5
  }

  .zoom .zoom-in {
    background-image: url(~@/assets/images/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png)
  }

  .zoom .zoom-in.disabled {
    opacity: .5
  }

  .zoom-reset {
    color: #595D62;
    font-weight: bold;
    padding: 2px 7px;
    background: #ffffff;
    border: 1px solid #E3E4E4;
    cursor: pointer;
    margin-left: 10px;
  }

  .zoom > span {
    text-align: center;
    width: 39px;
    margin: 0 10px;
  }

}




</style>
